<template>
  <div>
    <Card>
      <p slot="title">
        抽奖列表
      </p>
      <div slot="extra">
        <Button class="icon-btn" type="success" @click="$router.push({ name: 'lottery_edit' })" v-if="edit_btn">
          <span class="ml4">添加</span>
        </Button>
      </div>
      <Table ref="tables" :data="tableData" :columns="columns" @on-selection-change="select" border disabled-hover/>
      <div class="page-warp">
        <Button type="primary" @click="batchDelete" v-if="del_btn">批量删除</Button>
        <Page
            :current="page.current"
            :page-size="page.size"
            :total="page.total"
            show-total
            @on-change="pageChange"></Page>
      </div>
    </Card>
  </div>
</template>

<script>
import { lottery, delLottery } from '@/api/lottery'
import Icons from '_c/icons'
import { checkAccess } from '@/libs/util'

const checkButton = (_this, h, params) => {
  return h('Button', {
    props: {
      type: 'success',
      size: 'small'
    },
    style: {
      marginRight: '5px'
    },
    on: {
      click: () => {
        let { id } = params.row
        _this.$router.push({
          name: 'lucky_list',
          params: { id },
          query: { id }
        })
      }
    }
  }, '查看')
}

const editButton = (_this, h, params) => {
  return h('Button', {
    props: {
      type: 'primary',
      size: 'small'
    },
    style: {
      marginRight: '5px'
    },
    on: {
      click: () => {
        let { id } = params.row
        _this.$router.push({
          name: 'lottery_edit',
          params: { id },
          query: { id }
        })
      }
    }
  }, '编辑')
}

const deleteButton = (_this, h, params) => {
  return h('Poptip', {
    style: {
      'textAlign': 'left'
    },
    props: {
      confirm: true,
      title: '确定删除？'
    },
    on: {
      'on-ok': () => {
        let { id } = params.row
        delLottery({ id }).then(res => {
          if (res.code === 1) {
            _this.$Message.success(res.msg)
            _this.remove(params.index)
          }
        })
      }
    }
  }, [
    h('Button', {
      props: {
        type: 'error',
        size: 'small'
      }
    }, '删除')
  ])
}

export default {
  name: 'lottery_list',
  components: {
    Icons
  },
  data () {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      columns: [
        { type: 'selection', width: 65, align: 'center' },
        { title: '标题', key: 'title' },
        {
          title: '开始时间',
          width: 150,
          key: 'start_time',
          align: 'center',
          render: (h, params) => {
            return h('div', this.moment(params.row.start_time * 1000).format('YYYY-MM-DD HH:mm:ss'))
          }
        },
        {
          title: '结束时间',
          width: 150,
          key: 'end_time',
          align: 'center',
          render: (h, params) => {
            return h('div', this.moment(params.row.end_time * 1000).format('YYYY-MM-DD HH:mm:ss'))
          }
        },
        {
          title: '状态',
          width: 100,
          key: 'status',
          align: 'center',
          render: (h, params) => {
            let { status } = params.row
            let btn = ''
            let text = ''
            switch (status) {
              case 1:
                btn = 'success'
                text = '启用'
                break
              case 0:
                btn = 'primary'
                text = '禁用'
                break
              case 2:
                btn = 'error'
                text = '结束'
                break
              default:
            }
            return h('div', [
              h('Button', {
                props: {
                  type: btn,
                  size: 'small'
                }
              }, text)
            ])
          }
        },
        { title: '排序', width: 100, key: 'sort', align: 'center' },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let _this = this
            let btn = []
            if (checkAccess(['admin.lottery.lucky'])) {
              btn.push(checkButton(_this, h, params))
            }
            if (checkAccess(['admin.lottery.update'])) {
              btn.push(editButton(_this, h, params))
            }
            if (checkAccess(['admin.lottery.delete'])) {
              btn.push(deleteButton(_this, h, params))
            }
            return h('div', btn)
          }
        }
      ],
      selection: [],
      tableData: []
    }
  },
  computed: {
    edit_btn () {
      return checkAccess(['admin.lottery.store'])
    },
    del_btn () {
      return checkAccess(['admin.lottery.delete'])
    }
  },
  methods: {
    select (selection) {
      this.selection = selection
    },
    batchDelete () {
      let _this = this
      let ids = this.selection.map(selection => {
        return selection.id
      })
      if (!ids.length) {
        _this.$Message.error('请选择要删除的抽奖')
        return
      }
      _this.$Modal.confirm({
        title: '删除抽奖',
        content: '确定要删除所选抽奖?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          delLottery({ id: ids }).then(res => {
            if (res.code === 1) {
              this.$Message.success(res.msg)
              this.getList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    remove (index) {
      this.tableData.splice(index, 1)
      if (index === 0 && (this.page.current > 1)) {
        this.page.current = this.page.current - 1
        this.getList()
      } else {
        this.page.total = this.page.total - 1
      }
    },
    pageChange (page) {
      this.page.current = page
      this.getList()
    },
    getList () {
      let { current: page, size } = this.page
      lottery({ page, size }).then(res => {
        if (res.code === 1) {
          this.tableData = res.data.list
          this.page.total = res.data.count
        }
      })
    }
  },
  activated () {
    this.getList()
  },
  created () {
    this.getList()
  }
}
</script>

<style>
.ivu-card-head p{
  height: 32px;
  line-height: 32px;
}
</style>
